<template>
  <div class="box">
    <!-- 概况start -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark" style="height: 170px">
          <div class="box_text">
            行政概况
            <span class="box_text2">更新时间：2035年6月19日 12:35:59</span>
          </div>
          <el-row>
            <!-- 资产数量 -->
            <div
              class="box_1"
              style="background-color: #1890ff; border-radius: 10px"
            >
              <div class="box_1_img">
                <i
                  class="iconfont icon-jinbi"
                  style="font-size: 50px; color: #95deee"
                ></i>
              </div>
              <div class="text_1">
                <span class="text_2_span">资产数量</span>
                <span class="text_1_color"
                  ><span class="text_1_span">7654</span></span
                ><br />
              </div>
            </div>
            <!-- 新增资产 -->
            <div
              class="box_1"
              style="background-color: #ff8e8e; border-radius: 10px"
            >
              <div class="box_1_img">
                <i
                  class="iconfont icon-dingdan"
                  style="font-size: 50px; color: #ffcdcd"
                ></i>
              </div>
              <div class="text_1">
                <span class="text_2_span">新增资产</span>
                <span class="text_1_color"
                  ><span class="text_1_span">6988</span></span
                ><br />
              </div>
            </div>
            <!-- 新增采购 -->
            <div
              class="box_1"
              style="background-color: #8e7bfc; border-radius: 10px"
            >
              <div class="box_1_img">
                <i
                  class="iconfont icon-lirun2"
                  style="font-size: 50px; color: #cdc5fe"
                ></i>
              </div>
              <div class="text_1">
                <span class="text_2_span">新增采购</span>
                <span class="text_1_color"
                  ><span class="text_1_span">548</span></span
                ><br />
              </div>
            </div>
            <!-- 待入库资产 -->
            <div
              class="box_1"
              style="background-color: #ffb700; border-radius: 10px"
            >
              <div class="box_1_img">
                <i
                  class="iconfont icon-chezaikucun"
                  style="font-size: 40px; color: #ffdf8f"
                ></i>
              </div>
              <div class="text_1">
                <span class="text_2_span">待入库资产</span>
                <span class="text_1_color"
                  ><span class="text_1_span">26937</span></span
                ><br />
              </div>
            </div>
            <!-- 新增资产领用 -->
            <div
              class="box_1"
              style="background-color: #92dd8b; border-radius: 10px"
            >
              <div class="box_1_img">
                <i
                  class="iconfont icon-userplus-fill"
                  style="font-size: 45px; color: #cff0cc"
                ></i>
              </div>
              <div class="text_1">
                <span class="text_2_span">新增资产领用</span>
                <span class="text_1_color"
                  ><span class="text_1_span">8698</span></span
                ><br />
              </div>
            </div>
            <!-- 新增资产借用 -->
            <div
              class="box_1"
              style="background-color: #5dcce5; border-radius: 10px"
            >
              <div class="box_1_img">
                <i
                  class="iconfont icon-jinbi1"
                  style="font-size: 45px; color: #b8e9f4"
                ></i>
              </div>
              <div class="text_1">
                <span class="text_2_span">新增资产借用</span>
                <span class="text_1_color"
                  ><span class="text_1_span">7383</span></span
                ><br />
              </div>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 概况end -->
    <el-row :gutter="20">
      <el-col :span="18">
        <!-- 代办事项start -->
        <div class="grid-content bg-purple-dark" style="height: 150px">
          <div class="box_text">代办事项</div>
          <!-- 资产到期 -->
          <div class="backlog_class">
            <div class="backlog_img">
              <i
                class="iconfont icon-zichandaoqibiao"
                style="font-size: 40px"
              ></i>
            </div>
            <div class="backlog_text">
              <span class="backlog_text1">7165</span><br />
              <span class="backlog_text2">资产到期</span>
            </div>
          </div>
          <!-- 耗材库存预警 -->
          <div class="backlog_class">
            <div class="backlog_img">
              <i class="iconfont icon-chezaikucun" style="font-size: 37px"></i>
            </div>
            <div class="backlog_text" style="margin-left: 20px">
              <span class="backlog_text1">7165</span><br />
              <span class="backlog_text2">耗材库存预警</span>
            </div>
          </div>
          <!-- 待归还资产 -->
          <div class="backlog_class">
            <div class="backlog_img">
              <i class="iconfont icon-daiqianshou" style="font-size: 40px"></i>
            </div>
            <div class="backlog_text">
              <span class="backlog_text1">7165</span><br />
              <span class="backlog_text2">待归还资产</span>
            </div>
          </div>
          <!-- 资产变动提醒 -->
          <div class="backlog_class">
            <div class="backlog_img">
              <i
                class="iconfont icon-zichanbiandong"
                style="font-size: 40px"
              ></i>
            </div>
            <div class="backlog_text" style="margin-left: 10px">
              <span class="backlog_text1">7165</span><br />
              <span class="backlog_text2">资产变动提醒</span>
            </div>
          </div>
          <!-- 资产盘点 -->
          <div class="backlog_class">
            <div class="backlog_img">
              <i
                class="iconfont icon-zichanpandian"
                style="font-size: 40px"
              ></i>
            </div>
            <div class="backlog_text">
              <span class="backlog_text1">7165</span><br />
              <span class="backlog_text2">资产盘点</span>
            </div>
          </div>
        </div>
        <!-- 代办事项end -->
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <!-- 资产变动start -->
      <el-col :span="9">
        <div class="grid-content bg-purple-dark" style="height: 300px">
          <div>&nbsp;</div>
          <div id="myChart" :style="{ width: '500px', height: '300px' }"></div>
        </div>
      </el-col>
      <!-- 资产变动end -->
    </el-row>
    <el-row :gutter="10">
      <!-- 资产使用状态start -->
      <el-col :span="9">
        <div class="grid-content bg-purple-dark" style="height: 300px">
          <div>&nbsp;</div>
          <div id="myChart2" :style="{ width: '500px', height: '300px' }"></div>
        </div>
      </el-col>
      <!-- 资产使用状态end -->
    </el-row>
    <!-- 资产分类统计 -->
    <div class="box_2">
      <div
        class="grid-content bg-purple-dark"
        style="width: 460px; height: 610px"
      >
        <div class="box_text">资产分类统计</div>
        <div id="myChart3" :style="{ width: '500px', height: '300px' }"></div>
        <div class="box_2_centent">
          <template>
            <el-table
              :data="tableData"
              height="250"
              style="width: 90%; margin: auto; font-size: 12px"
            >
              <el-table-column prop="date" label="类别" width="180">
              </el-table-column>
              <el-table-column prop="name" label="数量" width="180">
              </el-table-column>
              <el-table-column prop="address" label="占比"> </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
    </div>
    <!-- 常用功能start -->
    <div class="dimission">
      <div class="box_text">常用功能</div>
      <!-- 会议室预定 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-dingdan" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>会议室预定</span></div>
      </div>
      <!-- 车辆预定 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i
            class="iconfont icon-a-jipiaocheliangyuding"
            style="font-size: 35px"
          ></i>
        </div>
        <div class="dimission_box_text"><span>车辆预定</span></div>
      </div>
      <!-- 车辆加油 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-cheliangjiayou" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>车辆加油</span></div>
      </div>
      <!-- 新建档案 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-xinjiandangan" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>新建档案</span></div>
      </div>
      <!-- 用章管理 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-yongzhangguanli" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>用章管理</span></div>
      </div>
      <!-- 资产盘点 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-zichanpandian" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>资产盘点</span></div>
      </div>
      <!-- 资产变动 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-zichanbiandong" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>资产变动</span></div>
      </div>
      <!-- 资产维修 -->
      <div class="dimission_box">
        <div class="dimission_box_img">
          <i class="iconfont icon-huo" style="font-size: 35px"></i>
        </div>
        <div class="dimission_box_text"><span>资产维修</span></div>
      </div>
    </div>
    <!-- 常用功能end -->
    <!-- 资产分布start -->
    <div class="notice">
      <div class="box_text">资产分布</div>
      <div style="margin-left: 10px;">
      <div id="myChart4" :style="{ width: '300px', height: '210px' }" style="margin-top: 20px;"></div>
      </div>
    </div>
    <!-- 资产分布end -->
  </div>
</template>

<script>
export default {
  name: "administartuveworkbenck",
  data() {
    return {
      data: [
        { value: 110, name: "语文成绩" },
        { value: 5, name: "数学" },
        { value: 140.5, name: "英语成绩" },
      ],
      tableData: [
        {
          date: "计算机",
          name: 1111,
          address: 11,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.assetChart();
    this.useAssetChart();
    this.assetClassChart();
    this.assetdisChart();
  },
  methods: {
    // 资产变动图表
    assetChart() {
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("myChart"));
      var option = {
        title: {
          text: "   资产变动",
        },
        legend: {
          data: ["资产总数量"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "资产总数量",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {},
          },
        ],
      };
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 资产使用图表
    useAssetChart() {
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("myChart2"));
      let option = {
        title: {
          text: "1798\n全部资产",
          left: "center", //对齐方式居中
          top: "45%", //距离顶部
          textStyle: {
            //文字配置
            color: "rgb(50,197,233)", //文字颜色
            fontSize: 18, //字号
            align: "center", //对齐方式
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "资产使用状态",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "闲置中" },
              { value: 735, name: "使用中" },
              { value: 580, name: "维修中" },
              { value: 484, name: "已处置" },
            ],
          },
        ],
      };
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 资产分类统计
    assetClassChart() {
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("myChart3"));
      var option = {
        title: {
          text: "资产分类",
          left: "center", //对齐方式居中
          top: "45%", //距离顶部
          textStyle: {
            //文字配置
            color: "#21547a", //文字颜色
            fontSize: 20, //字号
            align: "center", //对齐方式
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: this.data,
          },
        ],
      };
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 资产分布图表
    assetdisChart() {
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("myChart4"));
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{d}%\n{b}",
        },
        legend: {
          top: "90%",
          orient: "vertical",
        },
        series: [
          {
            name: "资产分布",
            type: "pie",
            center: ['50%', '40%'],
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              formatter: "{d}%", // 显示百分比，
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            
            data: [
              { value: 1048, name: "技术部"},
              { value: 735, name: "人事部" },
              { value: 580, name: "销售部" },
              { value: 484, name: "产品部" },
            ],
          },
        ],
      };
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
/* element-ui样式 */
.el-row {
  margin-bottom: 10px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
  border-radius: 10px;
}
/* 自定义样式 */
* {
  margin: 0px;
  padding: 0px;
}
.box {
  width: 98%;
  height: 100%;
  margin: auto;
  /* background-color: red; */
}
.box_text {
  padding-top: 20px;
  padding-left: 40px;
  font-size: 14px;
}
.box_text2 {
  padding-left: 20px;
  font-size: 14px;
  color: #989daa;
}
.box_1 {
  width: 180px;
  height: 78px;
  margin-left: 25px;
  margin-top: 20px;
  float: left;
  /* padding-left: 40px; */
}
.text_1 {
  margin-top: 10px;
  margin-left: 10px;
  width: 85px;
  float: left;
  color: #fff;
}
.text_1_span {
  margin-top: 20px;
  font-size: 23px;
}
.text_2_span {
  font-size: 12px;
}
.box_1_img {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
}
/* 待办事项 */
.backlog_class {
  width: 140px;
  height: 80px;
  float: left;
  margin-left: 40px;
  margin-top: 15px;
}
.backlog_img {
  width: 40px;
  height: 40px;
  float: left;
  margin-top: 20px;
}
.backlog_text {
  width: 73px;
  height: 50px;
  float: left;
  margin-top: 20px;
  text-align: center;
}
.backlog_text1 {
  color: #5b5e68;
  font-size: 20px;
}
.backlog_text2 {
  color: #989daa;
  font-size: 12px;
}
/* 资产分类 */
.box_2 {
  position: relative;
  left: 480px;
  top: -620px;
}
/* 常用单据 */
.dimission {
  width: 310px;
  height: 298px;
  position: relative;
  left: 950px;
  top: -1400px;
  border-radius: 10px;
  margin-top: 10px;
  background-color: #fff;
}
.dimission_box {
  width: 80px;
  text-align: center;
  margin-left: 10px;
  margin-top: 26px;
  font-size: 12px;
  float: left;
}
/* 资产分布 */
.notice {
  width: 310px;
  height: 408px;
  position: relative;
  left: 950px;
  top: -1400px;
  border-radius: 10px;
  margin-top: 10px;
  background-color: #fff;
}
.notice_message {
  float: left;
  width: 250px;
  height: 20px;
  margin-left: 30px;
  margin-top: 12px;
  border-radius: 5px;
  /* border: 1px solid red; */
}
.notice_message:hover {
  background-color: #b7b6b6;
}
.tag {
  float: left;
}
.message {
  float: left;
  margin-left: 20px;
  line-height: 22px;
  font-size: 12px;
}
</style>